<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动流</title>
    <style>
        /*
            浮动流：通过float属性设置标签的浮动流，
                   元素的流加载一旦设置为浮动流，那么该元素就不再按照标准流方式进行加载
                   浮动流的加载方式：在自己的原来的行号上进行向左或者是向右进行浮动，浮动的元素会紧邻
                   浮动流后面的元素如果是标准流那么就会相应的顶上来，但是如果标准流中有元素内容，内容不会带上来(该位置完全空出来内容才会随着标签一块上来)
                   如果是浮动流也会上来会紧邻前面浮动流的元素往左或者往右进行浮动
                   在浮动流中不区分行内标签和块级标签，都可以设置宽高属性值，都是在一行上进行浮动，当一行上浮满了，那么就会换行浮动
                   clear属性：清除自身紧邻其他元素的特效，如果把clear属性值设置为both就代表该浮动元素不紧临前面的浮动元素
        */
        div {
            height: 100px;
            width: 100px;
            background-color: red;
           /* margin-right: 20px*/
        }

        .one  {
            background-color: purple;
            float: left;

        }

        .two {
            float: right;

        }

        a {
            height: 100px;
            width: 100px;
            float: left;
            background-color: green;
           /* margin-right: 20px;*/
            clear: both;
        }

    </style>
</head>
<body>
    <div class="one">第一个div元素</div>
    <div class="two">第二个div元素</div>
    <a class="aOne" href="">百度一下</a>
    <a class="aOne" href="">必应一下</a>
</body>
</html>